<template>
  <div class="login">
    <div class="content">
      <van-form @submit="onSubmit">
        <van-field
          v-model="username"
          name="userName"
          label="用户名"
          placeholder="用户名"
          :rules="[{ required: true, message: '请填写用户名' }]"
        />
        <van-field
          v-model="password"
          type="password"
          name="pwd"
          label="密码"
          placeholder="密码"
          :rules="[{ required: true, message: '请填写密码' }]"
        />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit">提交</van-button>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      username: '18888888881',
      password: '123'
    }
  },
  methods: {
    async onSubmit (values) {
      const { data: res } = await this.$post(this.API.API_URL_LOGIN, values)
      if (res.length !== 0) {
        localStorage.setItem('userId', res.id)
        this.$toast.success('登录成功')
        console.log(this)
        this.$router.push(this.toPath || '/')
      } else {
        this.$toast.fail(res)
        this.password = ''
      }
    }
  }
}
</script>

<style scoped>
  .login {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background-color: bisque;
  }
  .content {
    margin-top: 30vh;
  }
</style>
